<template>
    <div v-if="selectFlog">
    <h1 style="text-align: center;margin-bottom: 15px;margin-top: 20px;">
        请选择需要练习的内容:
        <el-select v-model="indexMenu" placeholder="Select" style="width: 240px">
        <el-option
            v-for="(item,index) in subList"
            :label="item.subjectName"
            :value="index"
        />
        </el-select>
    </h1>
    <el-carousel ref="remarkCaruselRef" @change="changeSub"  style="margin: 20px auto;" :autoplay="false" :initial-index="indexMenu" indicator-position="none" :interval="4000" type="card" height="480px">
    <el-carousel-item  v-for="(item,index) in subList" :activeIndex="index" style="height: 500px;width: 650px;margin: 10px auto;" :key="index">
        <el-card :class="'cards cards'+((index+1)<=20?(index+1):Math.floor((Math.random()*20)+1))" style="width: 90%;height: 80%;margin: 20px auto;border: 1px solid black;">
            <template #header>
            <div class="card-header">
                <span>{{ item.name }}</span>
            </div>
            </template>
            <p style="margin-top: 15px;font-size: 22px;">{{ item.subjectName }}</p>
            <p>题目数量：<span style="">{{ item.total }}</span> 个</p>
            <el-button @click="toTest(item.sid,item.total)" style="margin-left: 180px;width: 200px;margin-top: 140px;" type="primary">前往练题</el-button>
            <el-button @click="toMnTest(item.sid,item.total)" style="margin-left: 190px;width: 180px;margin-top: 10px;" type="primary">前往模拟考试</el-button>
        </el-card>
    </el-carousel-item>
  </el-carousel>
  </div>
  <div v-else>
    <div v-if="TestFlog">
        <el-popover
            placement="top"
            :width="170"
            trigger="hover"
            content="返回到选题页面"
        >
            <template #reference>
                <el-icon @click="toHome()" style="position: absolute;left: 1350px;" size="25"><Close /></el-icon>
            </template>
        </el-popover>
    <div ref="containerRef" style="margin-top: 22px;width: 79%;height: 635px;display: inline-block;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;overflow: scroll;">
        
        <el-card :id="'part'+item.id" v-for="(item,index) in questList" :body-style="{padding:item.typeId==3||item.typeId==4?'0px':'20px'}" style="margin-bottom: 15px;">
            <template #header>
            <div class="card-header">
                <span style="display: inline-block;width: 940px;">{{index+1+". "+ item.question.split("/")[0] }}</span>
                <el-popover
                    placement="top"
                    :width="170"
                    trigger="hover"
                    content="将这道题添加到错题本"
                >
                    <template #reference>
                        <el-icon @click="addError(item.id)" style="position: relative;right: 0px;" size="20"><DocumentAdd /></el-icon>
                    </template>
                </el-popover>
            </div>
            </template>
            <p style="margin-top: 10px;" v-if="item.typeId==1" :style="{color:item.answerTxt=='A'&&i==0?'red':item.answerTxt=='B'&&i==1?'red':item.answerTxt=='C'&&i==2?'red':item.answerTxt=='D'&&i==3?'red':'BLACK'}" v-for="(text,i) in item.question.split('/')[1].split('_')" class="text item">{{ text }}</p>
            <p v-if="item.typeId==2" :style="{color:getColor(item.answerTxt,i)?'red':'black'}"v-for="(text,i) in item.question.split('/')[1].split('_')" class="text item">{{ text }}</p>
            <template #footer>答案：<span :style="{color:item.typeId==3&&item.answerTxt?'green':'red'}">{{ item.answerTxt }}</span></template>
        </el-card>
        <el-pagination
         background
         hide-on-single-page
         layout="prev, pager, next" 
         :total="pageQuset.total" 
         v-model:current-page="pageQuset.pageNum"
         v-model:page-size="pageQuset.pageSize"
         @current-change="handleCurrentChange"
      />
    </div>
    <div style="width: 20%;display: inline-block;height: 635px;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;overflow: scroll;">
        <el-anchor
        style="height: 600px;"
          :container="containerRef"
          direction="vertical"
          type="horizontal"
          :offset="238"
          @click="handleClick"
        >
          <el-anchor-link v-for="(item,index) in questList" style="size: 20px;" :href="'#part'+item.id" :title="index+1+'.'+item.question.split('/')[0]" />
        </el-anchor>
    </div>
    </div>
    <div  v-loading="loading" v-else>
        
        <div ref="containerRef" style="width: 79%;height: 635px;display: inline-block;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;overflow: scroll;">
        <el-card :id="'part'+index" v-for="(item,index) in questTestList" :body-style="{padding:item.typeId==3||item.typeId==4?'0px':'20px'}" style="margin-bottom: 15px;">
            <template #header>
            <div class="card-header">
                <span style="display: inline-block;width: 900px;">{{index+1+". "+ item.question.split("/")[0]}}</span>
                <span style="position: relative;right: 0px;">{{ "( "+(item.typeId==1?'单选题':item.typeId==2?'多选题':item.typeId==3?'判断题':item.typeId==4?'简答题':null)+" )" }}</span>
            </div>
            </template>
            <el-radio-group v-if="item.typeId==1" v-model="item.value" style="width: 10px;">
            <el-radio v-for="(text,i) in item.question.split('/')[1].split('_')" :value="i+1" size="large">{{ text }}</el-radio>
            </el-radio-group>


            <el-checkbox-group v-if="item.typeId==2" v-model="item.value" style="width: 10px;">
                <el-checkbox v-for="(city,ii) in item.question.split('/')[1].split('_')" :value="ii+1">{{ city }}</el-checkbox>
            </el-checkbox-group>

            <el-radio-group v-if="item.typeId==3" style="margin-left: 30px;width: 10px;" v-model="item.value">
            <el-radio value="正确" size="large">正确</el-radio>
            <el-radio value="错误" size="large">错误</el-radio>
            </el-radio-group>

            <el-input
                v-if="item.typeId==4"
                v-model="item.value"
                :rows="2"
                type="textarea"
            />
            <template v-if="answerTxtFlog" #footer>答案：<span :style="{color:item.typeId==3&&item.answerTxt?'green':'red'}">{{ item.answerTxt }}</span></template>
        </el-card>
    </div>
    <div style="width: 20%;display: inline-block;height: 635px;overflow-y: auto;-ms-overflow-style: none;scrollbar-width: none;overflow: scroll;">
        <el-anchor
          style="height: 600px;padding-top: 40px;width: 250px;margin-left: 5px;border: 1px solid black;border-radius: 10px;border-top: none;"
          :container="containerRef"
          direction="vertical"
          type="horizontal"
          :offset="0"
          @click="handleClick"
        >
        <h2 style="text-align: center">{{ questTestList.length?questTestList[0].subjectName:"" }} 模拟考试</h2>
        <p style="text-align: center;margin-bottom: 50px;color: darkgray;margin-top: 5px;">答题过程中请勿离开此页面</p>
        <el-popover
            placement="top"
            :width="170"
            trigger="hover"
            content="返回到选题页面"
        >
            <template #reference>
                <el-icon @click="toHome()" style="position: absolute;left: 210px;top: 510px;" size="25"><Switch /></el-icon>
            </template>
        </el-popover>
          <el-anchor-link v-for="(item,index) in questTestList" :style="{backgroundColor:item.value.length==0?color:'rgb(231, 250, 240)'}" style="font-weight: 500;size: 20px;width: 35px;display: inline-block;text-align: center;border-radius: 5px;height: 35px;line-height: 55px;margin-left: 8px;" :href="'#part'+index" >
            {{ index+1}}
          </el-anchor-link>
        <el-button style="margin-top: 50px;margin-left: 20px;width: 150px;" @click="getScore()">提交试卷</el-button>

        </el-anchor>
    </div>
    </div>
  </div>
  <el-dialog v-model="scoreFlog" :title="'总成绩：'+score+'分'" width="1200">
    <el-table :data="tableData" :row-class-name="tableRowClassName">
        <el-table-column label="题型" width="120">
            <template #default="scope">
                <span v-if="scope.row.typeId==1">单选题</span>
                <span v-if="scope.row.typeId==2">多选题</span>
                <span v-if="scope.row.typeId==3">判断题</span>
                <span v-if="scope.row.typeId==4">简答题</span>
            </template>
        </el-table-column>
        <el-table-column label="题干" prop="question" width="280">
            <template #default="scope">
                <span class="answer-text">{{ scope.row.question.split("/")[0] }}</span>
            </template>
        </el-table-column>
        <el-table-column label="答案" width="420px">
            <template #default="scope">
                <span style="width: 300px;" class="answer-text">{{ scope.row.answerTxt }}</span>
            </template>
        </el-table-column>
      <el-table-column label="您提交的答案" width="200" >
        <template #default="scope">
            <span v-if="scope.row.typeId==1" style="width: 300px;" class="answer-text">{{ scope.row.value==1?'A':scope.row.value==2?'B':scope.row.value==3?'C':scope.row.value==4?'D':"" }}</span>
            <span v-if="scope.row.typeId==2" style="width: 300px;" class="answer-text">{{ scope.row.typeId==2?scope.row.s:"" }}</span>
            <span v-if="scope.row.typeId==3" style="width: 300px;" class="answer-text">{{ scope.row.value.length!=0?scope.row.value:"" }}</span>
            <span v-if="scope.row.typeId==4" style="width: 300px;" class="answer-text">{{ scope.row.value }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所得分数" width="120" >
        <template #default="scope">
            {{ scope.row.fs }}
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
  <load :loading="boo"></load>
</template>
<script setup>
import { ref,reactive,onMounted,watch } from 'vue';
import { findUserSub } from '@/api/user/theoryInfo.js';
import { uidStore } from '@/store/uidStore'
import { findAllQuestion,addExaminationInformation,addErrors } from '@/api/admin/questions.js';
import { findQuestionBySub } from '@/api/user/exam.js';
import { ElMessage,ElMessageBox } from 'element-plus'
import { useUserStore1 } from '@/store/userStore'
import load from '@/views/load.vue'
// import load from '@/views/load.vue'

const boo=ref(false)

const remarkCaruselRef = ref(null); 
const page=ref({
    pageNum:1,
    pageSize:50,
})

const indexMenu = ref(0)
const color = ref("rgb(245, 245, 245)")
const score = ref(0)
const containerRef = ref(null)
const subList=ref([])
const questList=ref([])
const questTestList=ref([])
const tableData=ref([])
const loading=ref(false)
const selectFlog=ref(true)
const TestFlog=ref(true)
const answerTxtFlog=ref(false)
const scoreFlog=ref(false)

const pageQuset=ref({
    pageNum:1,
    pageSize:50,
})




const tableRowClassName = ({
  row,
  rowIndex,
}) => {
  if (row.fs == 0||row.fs==null) {
    return 'warning-row'
  }
  return ''
}



const toHome=()=>{
    selectFlog.value=true
    questList.value=[]
    questTestList.value=[]
    tableData.value=[]
}

const addError=(sid)=>{
    addErrors(sid,useUserStore1().userInfo.userId).then(res=>{
        if (res.data.code==200) {
            ElMessage.success("添加成功")
        }else{
            ElMessage.error(res.data.message)
        }
    })
}

const getScore=()=>{
    var boo=true
    questTestList.value.forEach(element => {
        if (element.value.length==0) {
            boo=false
        }
    });

    if (boo) {
        loading.value=true
        calculateScore()
        loading.value=false
        scoreFlog.value=true
    }else{
        ElMessageBox.confirm(
            '还有试题未答是否交卷?',
            '提交试卷',
            {
            cancelButtonText: '取消',
            confirmButtonText: '提交',
            type: 'warning',
            }
        )
            .then(() => {
            ElMessage({
                type: 'success',
                message: '交卷成功请稍后',
            })
            loading.value=true
            calculateScore()
            loading.value=false
            scoreFlog.value=true
            selectFlog.value=true
            color.value="rgb(245, 245, 245)"
            })
            .catch(() => {
            ElMessage({
                type: 'info',
                message: '已取消提交',
            })
            })
        }
        color.value="rgb(254, 122, 122)"
    }
const calculateScore=()=>{
    questTestList.value.forEach(element => {
        if (element.typeId==1||element.typeId==3) {
            if (element.answerTxt==(element.value==1?'A':element.value==2?'B':element.value==3?'C':element.value==4?'D':element.value)) {
                score.value+=2
                element.fs=2
            }
        }
        if (element.typeId==2) {
            element.value.sort(function(a, b) {  
                return a - b;
            });
            element.s=""
            element.value.forEach(el => {
                element.s+=(el==1?'A':el==2?'B':el==3?'C':el==4?'D':"")
            });
            if (element.answerTxt==element.s) {
                score.value+=3
                element.fs=3
            }
        }
        if (element.typeId==4) {
            var s= similarity(element.answerTxt,element.value,2)
            element.fs=s
            score.value+=s
        }
        tableData.value.push(element)
    });
    score.value=Math.floor(score.value)
}
const getColor=(text,i)=>{
    var boo=false
    text.split("").forEach(element => {
        if (element=="A"&&i==0||element=="B"&&i==1||element=="C"&&i==2||element=="D"&&i==3) {
            boo=true
        }
    });
    return boo
}

watch(indexMenu, (newValue) => {
    remarkCaruselRef.value.setActiveItem(indexMenu.value)
});

const handleClick = (e) => {
  e.preventDefault()
}

const getQuser=()=>{
    findQuestionBySub(pageQuset.value.pageNum,pageQuset.value.pageSize,pageQuset.value.subId).then(res=>{
        questList.value=res.data.obj.list
        pageQuset.value.total=res.data.obj.total
    })
}

const toTest=(id,total)=>{
    if (total!=0) {
        selectFlog.value=false
        TestFlog.value=true
        pageQuset.value.subId=id
        getQuser()
    }else{
        ElMessage.error("该单元还没有题库")
    }
    
}

const toMnTest=(sid,num)=>{
    boo.value=true
    TestFlog.value=false
    selectFlog.value=false
    addExaminationInformation(sid).then(res=>{
        setTimeout(() => {
            if (res.data.code==200) {
                questTestList.value=res.data.obj
                questTestList.value.forEach(element => {
                    element.value=[]
                });
            }else{
                ElMessage.error(res.data.message)
                TestFlog.value=true
                selectFlog.value=true
            }
            boo.value=false            
        }, 1000);
        
        
    })
}

findUserSub(uidStore().uid).then(res=>{
    subList.value=res.data.obj
        var p={
            pageNum:1,
            pageSize:50,
            subId:subList.value[0].sid
        }
        findAllQuestion(p).then(res=>{
            subList.value[0].total=res.data.obj.total
        })
    page.value.subId=res.data.obj.sid
})
const changeSub=(current,prev)=>{
    if (subList.value[current].total==null) {
        var p={
            pageNum:1,
            pageSize:50,
            subId:subList.value[current].sid
        }
        findAllQuestion(p).then(res=>{
            subList.value[current].total=res.data.obj.total
        })
    }
}
function levenshteinDistance(a, b) {  
    if (a.length === 0) return b.length;  
    if (b.length === 0) return a.length;  
  
    let matrix = [];  
  
    // 初始化矩阵  
    for (let i = 0; i <= a.length; i++) {  
        matrix[i] = [i];  
    }  
  
    for (let j = 0; j <= b.length; j++) {  
        matrix[0][j] = j;  
    }  
  
    // 填充矩阵  
    for (let i = 1; i <= a.length; i++) {  
        for (let j = 1; j <= b.length; j++) {  
            if (a[i - 1] === b[j - 1]) {  
                matrix[i][j] = matrix[i - 1][j - 1];  
            } else {  
                matrix[i][j] = Math.min(  
                    matrix[i - 1][j - 1] + 1, // 替换  
                    matrix[i][j - 1] + 1,     // 插入  
                    matrix[i - 1][j] + 1      // 删除  
                );  
            }  
        }  
    }  
  
    // 返回矩阵右下角的值，即两个字符串的编辑距离  
    return matrix[a.length][b.length];  
}  
  
function similarity(a, b, bias = 0) {  
    const distance = levenshteinDistance(a, b);  
    const maxLength = Math.max(a.length, b.length);  
      
    // 计算无偏差的相似度百分比  
    const baseSimilarity = (maxLength - distance) / maxLength * 100;  
      
    // 应用偏差调整（简单示例：如果偏差内，则视为100%相似，否则按正常计算）  
    if (distance <= bias) {  
        return 4; // 满分  
    } else {  
        // 将百分比转换为满分4分的评分  
        return Math.max(0, (baseSimilarity / 100) * 4);  
    }  
}  
  
const handleCurrentChange = (val) => {
    pageQuset.value.pageNum=val
    getQuser()
}
</script>
<style>
.el-table .warning-row {
  --el-table-tr-bg-color: rgb(253, 207, 207);
}
.el-table .success-row {
  --el-table-tr-bg-color: rgb(235, 254, 234);
}



.cards{
    background-size: cover;
    
    /* 设置背景图片的重复方式 */
    background-repeat: no-repeat;
    
    /* 设置背景图片的位置 */
    background-position: center center;
    
    /* 设置背景的固定与滚动 */
    background-attachment: fixed;
    
    /* 设置背景大小 */
    background-size: 100% 100%;
    background: rgb(204, 204, 204);
    /* 设置容器的宽度和高度 */
    width: 100%;
    height: 100vh; 
    
    /* 设置其他容器的属性 */
    /* display: flex; */
    justify-content: center;
    align-items: center;
}

.cards1{
    background-image: url(../../img/bgimg1.jpg);
}
.cards1:hover{
    animation: gradient1 8s ease infinite;
}

@keyframes gradient1 {
    0% {
        background-position: 0 12%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 30% 40%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 0 12%;
        background-size: 200% 200%;
    }
}

.cards2{
    background-image: url(../../img/bgimg2.jpg);
}
.cards2:hover{
    animation: gradient2 8s ease infinite;
}


@keyframes gradient2 {
    0% {
        background-position: 50% 50%;
        background-size: 350% 350%;
    }
    25% {
        background-position: 50% 0%;
        background-size: 250% 250%;
    }
    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }
    75% {
        background-position: 50% 100%;
        background-size: 250% 250%;
    }
    100% {
        background-position: 50% 50%;
        background-size: 350% 350%;
    }
}
.cards3{
    background-image: url(../../img/bgimg3.jpg);
}
.cards3:hover{
    animation: gradient3 8s ease infinite;
}


@keyframes gradient3 {
    0% {
        background-position: 50% 50%;
        background-size: 300% 300%;
    }

    25% {
        background-position: 50% 100%;
        background-size: 250% 250%;
    }
    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }
    75% {
        background-position: 50% 0%;
        background-size: 250% 250%;
    }

    100% {
        background-position: 50% 50%;
        background-size: 300% 300%;
    }
}

.cards4{
    background-image: url(../../img/bgimg4.jpg);
}
.cards4:hover{
    animation: gradient4 12s ease infinite;
}

@keyframes gradient4 {
    0% {
        background-position: 0% 100%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 30% 40%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 12%;
        background-size: 200% 200%;
    }
}

.cards5{
    background-image: url(../../img/bgimg5.jpg);
}
.cards5:hover{
    animation: gradient5 8s ease infinite;
}

@keyframes gradient5 {
    0% {
        background-position: 100% 100%;
        background-size: 200% 200%;
    }


    50% {
        background-position: 0 12%;
        background-size: 200% 200%;
    }
    75% {
        background-position: 30% 40%;
        background-size: 100% 100%;
    }
    100% {
        background-position: 100% 100%;
        background-size: 200% 200%;
    }
}

.cards6{
    background-image: url(../../img/bgimg6.jpg);
}
.cards6:hover{
    animation: gradient6 8s ease infinite;
}

@keyframes gradient6 {
    0% {
        background-position: 0 12%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 30% 40%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 0 12%;
        background-size: 200% 200%;
    }
}

.cards7{
    background-image: url(../../img/bgimg7.jpg);
}
.cards7:hover{
    animation: gradient7 8s ease infinite;
}


@keyframes gradient7 {
    0% {
        background-position: 60% 0%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 30% 40%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 60% 0%;
        background-size: 200% 200%;
    }
}

.cards8{
    background-image: url(../../img/bgimg8.jpg);
}
.cards8:hover{
    animation: gradient8 8s ease infinite;
}


@keyframes gradient8 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards9{
    background-image: url(../../img/bgimg9.jpg);
}
.cards9:hover{
    animation: gradient9 8s ease infinite;
}


@keyframes gradient9 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards10{
    background-image: url(../../img/bgimg10.jpg);
}
.cards10:hover{
    animation: gradient10 8s ease infinite;
}


@keyframes gradient10 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards11{
    background-image: url(../../img/bgimg12.jpg);
}
.cards11:hover{
    animation: gradient11 8s ease infinite;
}


@keyframes gradient11 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards12{
    background-image: url(../../img/bgimg11.jpg);
}
.cards12:hover{
    animation: gradient12 8s ease infinite;
}


@keyframes gradient12 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards13{
    background-image: url(../../img/bgimg13.jpg);
}
.cards13:hover{
    animation: gradient13 8s ease infinite;
}


@keyframes gradient13 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards14{
    background-image: url(../../img/bgimg14.jpg);
}
.cards14:hover{
    animation: gradient14 8s ease infinite;
}


@keyframes gradient14 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards15{
    background-image: url(../../img/bgimg15.jpg);
}
.cards15:hover{
    animation: gradient15 8s ease infinite;
}


@keyframes gradient15 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards16{
    background-image: url(../../img/bgimg16.jpg);
}
.cards16:hover{
    animation: gradient16 8s ease infinite;
}


@keyframes gradient16 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards17{
    background-image: url(../../img/bgimg17.jpg);
}
.cards17:hover{
    animation: gradient17 8s ease infinite;
}


@keyframes gradient17 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}


.cards18{
    background-image: url(../../img/bgimg18.jpg);
}
.cards18:hover{
    animation: gradient18 8s ease infinite;
}


@keyframes gradient18 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards19{
    background-image: url(../../img/bgimg19.jpg);
}
.cards19:hover{
    animation: gradient19 8s ease infinite;
}


@keyframes gradient19 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}

.cards20{
    background-image: url(../../img/bgimg20.jpg);
}
.cards20:hover{
    animation: gradient20 8s ease infinite;
}


@keyframes gradient20 {
    0% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }

    50% {
        background-position: 50% 50%;
        background-size: 100% 100%;
    }

    100% {
        background-position: 100% 30%;
        background-size: 200% 200%;
    }
}
</style>